<template>
  <div class="constellation" @click="navToDetail">
    <section-title title="星座运势" />
    <div class="icon-bar">
      <i class="icon" :style="{backgroundImage:`url('${consIcon}')`}"></i>
      <span class="text">{{consText}}</span>
    </div>
    <div class="luck-list">
      <luck-item
        v-for="(v,i) in lucks"
        :key="i"
        :icon="v.icon"
        :text="v.text"
        :percent="v.percent"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { SectionTitle, LuckItem } from '@/components'
import { getConsObj } from '@/tools'
import luck1 from '@/assets/icons/luck-1.png'
import luck2 from '@/assets/icons/luck-2.png'
import luck3 from '@/assets/icons/luck-3.png'
import luck4 from '@/assets/icons/luck-4.png'

export default {
  name: 'constellation',
  components: { SectionTitle, LuckItem },
  data: () => ({
    lucksBase: [
      { icon: luck1, text: '综合运势' },
      { icon: luck2, text: '事业运势' },
      { icon: luck3, text: '爱情运势' },
      { icon: luck4, text: '财富运势' }
    ]
  }),
  computed: {
    ...mapState('Home', ['luck']),
    ...mapState('User', ['conscode']),
    consIcon() {
      return getConsObj(this.conscode).icon
    },
    consText() {
      return getConsObj(this.conscode).text
    },
    lucks() {
      return this.lucksBase.map((v, i) => ({ ...v, ...this.luck[i] }))
    }
  },
  methods: {
    ...mapActions('Home', ['getLuck']),
    navToDetail() {
      this.$router.push({ name: 'constellation-detail' })
    }
  },
  mounted() {
    this.getLuck()
  }
}
</script>

<style lang="stylus">
$icon-size = 40px;

.constellation {
  .icon-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .icon {
    width: $icon-size;
    height: $icon-size;
    background: center / cover no-repeat;
  }

  .text {
    font-size: 0.5 * $icon-size;
    margin-left: 10px;
  }
}
</style>
